<template>
  <div id="visual-burial-point">
    <v-header title="可视化埋点" :showDownloadBtn='false' :saveShow='false'></v-header>
    <div class='vbp-tab' ref='tabHeight'>
      <div style='background:#fff;height:100%'>
        <!-- <ul>
          <li @click='tabLi(index)' v-for='(item,index) in liTitle' :key="item.id" :class='[index==ind?"liActive":""]'>{{item}}</li>
        </ul> -->
        <div style='padding:0 20px'>
          <tab-first :is="currentView" keep-alive></tab-first>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import TabFirst from './tabsComp/webBurialPointTab'
  // import TabSecond from './tabsComp/androidBurialPointTab'
  // import TabThird from './tabsComp/iOSBurialPointTab'
  import { VHeader } from '../../../components'

  export default {
    name: 'visual-burial-point',
    components: {
      VHeader,
      TabFirst
      // TabSecond,
      // TabThird
    },
    data () {
      return {
        ind: 0,
        liTitle: ['Web'],
        currentView: 'TabFirst'
      }
    },
    created () {
      this.$nextTick(() => {
        this.$refs.tabHeight.style.height = window.innerHeight - 60 + 'px'
      })
    },
    methods: {
      tabLi (index) {
        this.ind = index
        // if (this.ind === 0) {
        //   this.currentView = 'TabFirst'
        // } else if (this.ind === 1) {
        //   this.currentView = 'TabSecond'
        // } else if (this.ind === 2) {
        //   this.currentView = 'TabThird'
        // }
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  #visual-burial-point
    overflow hidden
    height 100%
    .vbp-tab
      overflow auto
      height 100%
      margin 10px 0 0 10px
      padding-right 10px
      ul
        width 100%
        height 50px
        // background #016DFB
        display flex
        align-items center
        padding 0 20px
        position relative;
        li
          color #fff
          font-size 14px
          display flex
          justify-content center
          margin-top 10px
          padding 0 20px
          cursor pointer
        .liActive
          background #fff
          height 40px
          line-height 40px
          color #fff
          margin-top 10px
          border-radius 4px 4px
          background #016DFB
</style>
